<template>
  <div class="input-app" v-cloak>
    <div class="input-box">
      <div class="input-box-title">双半场记分牌录入后台</div>
      <div class="input-box-contain">
        <div class="input-box-contain-title">
          <span class="input-box-contain-state">赛事名称</span>
          <input type="text" class="input-box-contain-input"  placeholder="赛事名称" v-model="title" @keyup="submitBoardInfo($event,'title')">
        </div>
        <div class="input-box-contain-info clearfix">
          <div class="input-box-contain-info-item input-box-contain-info-left fl">
            <div class="input-box-contain-top">
              <span class="input-box-contain-state">主队名称</span>
              <input type="text" class="input-box-contain-input" placeholder="主队名称" v-model="leftHostTeamName" @keyup="submitBoardInfo($event,'left')">
            </div>
            <div class="input-box-contain-middle clearfix">
              <div class="input-box-contain-middle-left fl clearfix">
                <div class="input-box-contain-middle-left-state fl">比分</div>
                <div class="input-box-contain-middle-left-inputs fl">
                  <input type="text" class="input-box-contain-middle-input" placeholder="主队" v-model="leftHostScore" @keyup="updateLeftHostScore($event)">
                  <div class="input-box-contain-middle-left-vs">vs</div>
                  <input type="text" class="input-box-contain-middle-input" placeholder="客队" v-model="leftGuestScore" @keyup="updateLeftGuestScore($event)">
                </div>
              </div>
              <div class="input-box-contain-middle-right fl">
                <div class="input-box-contain-middle-right-time clearfix">
                  <span class="input-box-contain-time-state fl">倒计时</span>
                  <input type="text" class="input-box-contain-middle-input fl" placeholder="格式 00:00" v-model="leftCountDownTime" @keyup="submitBoardInfo($event,'leftTime')">
                  <span class="input-box-contain-time-btn fl" @click="startLeftBoardCountDown">开始</span>
                </div>
                <div class="input-box-contain-middle-right-time clearfix">
                  <span class="input-box-contain-time-state-fl fl">第</span>
                  <input type="text" class="input-box-contain-middle-input fl" placeholder="0" v-model="leftRound" @keyup="updateLeftRound($event)">
                  <span class="input-box-contain-time-state fl">局</span>
                </div>
              </div>
            </div>
            <div class="input-box-contain-name">
              <span class="input-box-contain-state">客队名称</span>
              <input type="text" class="input-box-contain-input" placeholder="客队名称" v-model="leftGuestTeamName" @keyup="submitBoardInfo($event,'left')">
            </div>
            <div class="input-box-contain-confim" @click="updateLeftBoardInfo">确定</div>
          </div>



          <div class="input-box-contain-info-item fl">
            <div class="input-box-contain-top">
              <span class="input-box-contain-state">主队名称</span>
              <input type="text" class="input-box-contain-input" placeholder="主队名称" v-model="rightHostTeamName" @keyup="submitBoardInfo($event,'right')">
            </div>
            <div class="input-box-contain-middle clearfix">
              <div class="input-box-contain-middle-left fl clearfix">
                <div class="input-box-contain-middle-left-state fl">比分</div>
                <div class="input-box-contain-middle-left-inputs fl">
                  <input type="text" class="input-box-contain-middle-input" placeholder="主队" v-model="rightHostScore" @keyup="updateRightHostScore($event)">
                  <div class="input-box-contain-middle-left-vs">vs</div>
                  <input type="text" class="input-box-contain-middle-input" placeholder="客队" v-model="rightGuestScore" @keyup="updateRightGuestScore($event)">
                </div>
              </div>
              <div class="input-box-contain-middle-right fl">
                <div class="input-box-contain-middle-right-time clearfix">
                  <span class="input-box-contain-time-state fl">倒计时</span>
                  <input type="text" class="input-box-contain-middle-input fl" placeholder="格式 00:00" v-model="rightCountDownTime" @keyup="submitBoardInfo($event,'rightTime')">
                  <span class="input-box-contain-time-btn fl" @click="startRightBoardCountDown">开始</span>
                </div>
                <div class="input-box-contain-middle-right-time clearfix">
                  <span class="input-box-contain-time-state-fl fl">第</span>
                  <input type="text" class="input-box-contain-middle-input fl" placeholder="0" v-model="rightRound" @keyup="updateRightRound($event)">
                  <span class="input-box-contain-time-state fl">局</span>
                </div>
              </div>
            </div>
            <div class="input-box-contain-name">
              <span class="input-box-contain-state">客队名称</span>
              <input type="text" class="input-box-contain-input" placeholder="客队名称" v-model="rightGuestTeamName" @keyup="submitBoardInfo($event,'right')">
            </div>
            <div class="input-box-contain-confim" @click="updateRightBoardInfo">确定</div>
          </div>
        </div>
      </div>
      <div class="input-box-btn" @click="startAllBoardCountDown">同时倒计时</div>
    </div>
  </div>
</template>
<script>
  import HomeComponent from './scripts/home';
  export default HomeComponent;






</script>

<style lang="scss">
  @import "../assets/scss/variables.scss";
  @import "../assets/scss/mixins.scss";
  @import "../assets/scss/core.scss";
  .input-app{
    width: 100%;
    height: 100%;
    padding-left: pxTorem(269px);
    padding-right: pxTorem(269px);
    @include sizing;
    background-color: #f1f1f1;
    [placeholder]
            ::-moz-placeholder {
      color: #9a9a9a;
    }
    :-ms-input-placeholder {
      color: #9a9a9a;
    }
    ::-webkit-input-placeholder {
      color: #9a9a9a;
    }
    .input-box{
      width: 100%;
      height: 100%;
      .input-box-title{
        width: 100%;
        height: pxTorem(72px);
        line-height: pxTorem(72px);
        background-color: #fff;
        padding-left: pxTorem(36px);
        @include sizing;
        font-size: pxTorem(30px);
      }
      .input-box-contain{
        width: 100%;
        background-color: #fff;
        margin-top: pxTorem(12px);
        .input-box-contain-title{
          width: 100%;
          height: pxTorem(70px);
          padding-left: pxTorem(36px);
          border-bottom: 1px solid #f1f1f1;
          @include sizing;
          input{
            margin-top: pxTorem(17px);
          }
          .input-box-contain-state{
            line-height: pxTorem(70px);
          }
        }
        .input-box-contain-info{
          width: 100%;
          .input-box-contain-info-item{
            width: 50%;
            padding-left: pxTorem(36px);
            @include sizing;
            .input-box-contain-top{
              height: pxTorem(36px);
              line-height: pxTorem(36px);
              margin-top: pxTorem(17px);
            }
            .input-box-contain-middle{
              width: 100%;
              /*margin-top: 30px;*/
              font-size: pxTorem(16px);
              .input-box-contain-middle-left,input-box-contain-middle-right{
                width: 50%;
                margin-top: pxTorem(30px);
              }
              .input-box-contain-middle-left-state{
                width: pxTorem(76px);
                height: pxTorem(102px);
                line-height: pxTorem(102px);
              }
              .input-box-contain-middle-left-vs{
                text-align: center;
                padding-top: pxTorem(8px);
                padding-bottom: pxTorem(8px);
              }
              .input-box-contain-middle-right-time{
                margin-top: pxTorem(30px);
                height: pxTorem(36px);
                line-height: pxTorem(36px);
                input{
                  margin-left: pxTorem(12px);
                  margin-right: pxTorem(12px);
                }
                .input-box-contain-time-btn{
                  display: inline-block;
                  width: pxTorem(70px);
                  height: pxTorem(36px);
                  text-align: center;
                  line-height: pxTorem(36px);
                  background-color: #ff6666;
                  color: #fff;
                  @include borderRadius(pxTorem(4px));
                }
                .input-box-contain-time-state-fl{
                  width: pxTorem(48px);
                  display: inline-block;
                  text-align: right;
                }
              }

            }
          }
          .input-box-contain-info-left{
            border-right: 1px solid #f1f1f1;
          }

        }
        .input-box-contain-state{
          float: left;
          width: pxTorem(76px);
          font-size: pxTorem(16px);
        }
        .input-box-contain-name{
          width: 100%;
          height: pxTorem(36px);
          line-height: pxTorem(36px);
          @include sizing;
          margin-top: pxTorem(30px);
        }
        .input-box-contain-confim{
          width: pxTorem(150px);
          height: pxTorem(48px);
          line-height: pxTorem(48px);
          text-align: center;
          background-color: #66b8ff;
          color: #fff;
          margin: pxTorem(120px) auto pxTorem(81px);
          @include borderRadius(pxTorem(4px));
          font-size: pxTorem(16px);
        }
        .input-box-contain-input{
          width: pxTorem(540px);
        }
        input{
          background-color: #f1f1f1;
          line-height: pxTorem(36px);
          @include borderRadius(pxTorem(4px));
          /*margin-left: 12px;*/
          padding-left: pxTorem(10px);
          @include sizing;
          font-size: pxTorem(16px);
          float: left;
        }
        .input-box-contain-middle-input{
          width: pxTorem(120px);
        }
      }
      .input-box-btn{
        width: pxTorem(250px);
        height: pxTorem(100px);
        background-color: #ff6666;
        font-size: pxTorem(40px);
        color: #fff;
        line-height: pxTorem(100px);
        @include borderRadius(pxTorem(8px));
        text-align: center;
        margin: pxTorem(10px) auto;
      }
    }
  }
</style>
